import React, { Component } from 'react'
import axios from 'axios';
import LeiZhenYu from './LeiZhenYu';
import QingTian from './QingTian';
import YinTian from './YinTian';
import Yu from './Yu';
import './index.css';
export default class Weather extends Component {
    state = {
        city: '', 
        wea: []
    }
    render() {
        //判断
        return (
            <div style={{width: '200px',height: '200px', background: 'black'}}>
                {this.state.wea[0] && this.state.wea[0].wea.indexOf('雷阵雨') !== -1 &&  <LeiZhenYu />}
                {this.state.wea[0] && this.state.wea[0].wea.indexOf('晴') !== -1 &&  <QingTian />}
                {this.state.wea[0] && this.state.wea[0].wea === '阴' &&  <YinTian />}
                {this.state.wea[0] && this.state.wea[0].wea === '大雨' &&  <Yu />}
            </div>
        )
    }

    async componentDidMount(){
        let result = await axios.get('https://www.tianqiapi.com/api/?version=v1&city=%E5%8C%97%E4%BA%AC&appid=23941491&appsecret=TXoD5e8P');
        // console.log(result.data);
        //测试
        result.data.data[0].wea = '大雨';
        this.setState({
            city: result.data.city,
            wea: result.data.data
        })
    }
}
